// 检查项组件
<template>
  <div>
    <template v-if="data.length>0&&showCardClass">
      <v-accordion 
        v-for="(pitem,pindex) in data" 
        :key="pindex+'equipmentDetects'" 
        class="qzjx-accordion" 
        :opened="opened"
      >
        <div slot="title" class="title-box">
          <div class="index">{{Number(defaultIndex)+pindex+1}}</div>
          <div class="title">{{pitem[content]}}</div>
        </div>
        <div class="v-check-list">
          <ul>
            <li v-for="(item,index) in pitem.children" :key="item[bizType]+'bottomList'+index">
              <div class="left-box">
                <span style="color:#F15A5A;" v-if="item.isMustUpload">*</span> {{item[name]}}
              </div>
              <div class="right-box">
                <span v-if="disabled&&item.attachments.length==0" class="noUpload">未上传</span>
                <qm-file-upload :ref="uploadId+index+pindex"
                                v-else
                                :uploadId="uploadId+index+pindex"
                                :galleryOptions="galleryOptions"
                                :actionsOneGroup="actionsGroup(item)"
                                :extensions="extensions"
                                :accept="accept"
                                :disabled="disabled"
                                :showOffline="isOffline==1"
                                :isDefaultFile="true"
                                :defaultFiles="item.attachments"
                                @onSuccess="(file)=>onSuccess(file,index)"
                                @deleteFileAfter="(listIndex,attachmentId)=>deleteFileAfter(listIndex,attachmentId,index)"
                                :params="{type:'attach', dataKey: dataKey, bizType: item[bizType], typeCode, address}">
                </qm-file-upload>
              </div>
            </li>
          </ul>
          <div style="margin-top:8px;" v-if="showPass">
            <van-radio-group v-model="pitem.isPass" style="margin-top:15px" :disabled="disabledPass">
              <van-radio :name="0">不通过</van-radio>
              <van-radio :name="1">通过</van-radio>
            </van-radio-group>
          </div>
        </div>
      </v-accordion>
    </template>
    <template v-else-if="data.length>0&&!showCardClass">
      <div class="df-box" v-for="(pitem,pindex) in data" :key="pindex+'equipmentDetects'">
        <div class="index">{{Number(defaultIndex)+pindex+1}}</div>
        <div class="right-content-box">
          <div class="v-check-list">
            <div class="title">{{pitem[content]}}</div>
            <ul>
              <li v-for="(item,index) in pitem.children" :key="item[bizType]+'bottomList'+index">
                <div class="left-box">{{item[name]}}</div>
                <div class="right-box">
                  <span v-if="disabled&&item.attachments.length==0" class="noUpload">未上传</span>
                  <qm-file-upload :ref="uploadId+index"
                                  v-else
                                  :uploadId="uploadId+index"
                                  :galleryOptions="galleryOptions"
                                  :actionsOneGroup="actionsGroup(item)"
                                  :maximagescount="maximagescount"
                                  :extensions="extensions"
                                  :accept="accept"
                                  :disabled="disabled"
                                  :showOffline="isOffline==1"
                                  :isDefaultFile="true"
                                  :defaultFiles="item.attachments"
                                  @onSuccess="(file)=>onSuccess(file,index)"
                                  @deleteFileAfter="(listIndex,attachmentId)=>deleteFileAfter(listIndex,attachmentId,index)"
                                  :params="{type:'attach', dataKey: dataKey, bizType: item[bizType]}">
                  </qm-file-upload>
                </div>
              </li>
            </ul>
            <div style="margin-top:8px;" v-if="showPass">
              <van-radio-group v-model="item.isPass" style="margin-top:15px" :disabled="disabledPass">
                <van-radio :name="0">不通过</van-radio>
                <van-radio :name="1">通过</van-radio>
              </van-radio-group>
            </div>
          </div>
        </div>
      </div>
    </template>
    <v-empty v-if="data.length==0&&showEmpty" description="暂无数据" />
  </div>
</template>

<script>
export default {
  name:'',
  props:{
    // 附件option
    galleryOptions:{
      type:Object,
      default: () => {
        return {};
      },
    },
    typeCode:{
      type:String,
      require:true
    },
    // 上传方式的选择 1拍照 2相册 3文件
    actionsOneGroup: {
      type: Array,
      default: () => {
        return [1]
      },
    },
    extensions: {
      type: String,
      default:'jpg,jpeg,png'
    },
    accept: {
      type: String,
      default:'.jpg,.jpeg,.png'
    },
    // 附件主键
    dataKey:{
      type:String,
      require:true
    },
    // bizType
    bizType:{
      type:String,
      default:'bizType'
    },
    // 检查项名称
    name:{
      type:String,
      default:'customName'
    },
    // 检查项大标题
    content:{
      type:String,
      default:'customName'
    },
    // 是否显示上传按钮
    disabled:{
      type:Boolean,
      default:false
    },
    disabledPass:{
      type:Boolean,
      default:false
    },
    uploadId:{
      type:String,
    },
    attachCraneType:String,
    // 是否显示上传按钮
    showPass:{
      type:Boolean,
      default:false
    },
    // 是否显示空数据样式
    showEmpty:{
      type:Boolean,
      default:true
    },
    // 是否添加qzjx-card样式
    showCardClass:{
      type:Boolean,
      default:true
    },
    // 默认的下标，以防万一开始渲染的项并不是从0开始，这个index需要对应的-1
    defaultIndex:{
      type:Number||String,
      default:0
    },
    // 是否展开
    opened:{
      type:Boolean,
      default:true
    },
    address: {
        type: String,
        default: '',
    },
    maximagescount: {
        type: Number,
        default: 1
    },
  },
  data () {
    return {
      myData:{},
      data:[],
      isOffline:false,
    }
  },
  created () {
    // this.myData={}
    // this.myData=JSON.parse(JSON.stringify(this.data))
    this.getFileList()
  },
  methods: {
    actionsGroup(item){
      if(this.isOffline){
        return [1,2]
      }else{
        return item.uploadFrom?item.uploadFrom.split(','):this.actionsOneGroup
      }
    },
    async getFileFlag(){
      let func=()=>{
        return new Promise((resolve, reject) => {
          let num=0
          if(this.data.length>0){
            this.data.forEach((pitem,pindex)=>{
              if(pitem.children.length>0){
                pitem.children.forEach((item,index)=>{
                  if(item.isMustUpload&&this.$refs[`${this.uploadId}${index}${pindex}`][0].getUploadedCount()<1) {
                    num++
                  }
                })
              }
            })
          }
          resolve(num)
        })
      }
      let num=await func()
      if(num>0) {
        return false
      }else{
        return true
      }
    },
    getFileList(){
      this.$f7.request.post(
        '/admin/attachmentFormDetail/listUpload', 
        {typeCode:this.typeCode,dataKey:this.dataKey,attachCraneType:this.attachCraneType},
        (r) => {
          r = JSON.parse(r);
          if (r?.success&&r.parameters.fileList) {
            this.data = r.parameters.fileList
            this.isOffline=r.parameters.offline
            return 
          }
          this.data = []
          this.$framework.$f7.dialog.toast("获取文件失败");
        }
      );
    },
    onSuccess(file,index){
      // if(!this.myData.detectDictItems[index].attachmentIds) this.myData.detectDictItems[index].attachmentIds=[]
      // this.myData.detectDictItems[index].attachmentIds.push(file.key)
      // this.$emit('successUpload',this.myData)
    },
    deleteFileAfter(listIndex,attachmentId,index){
      // let findIndex=this.myData.detectDictItems[index].attachmentIds.indexOf(attachmentId)
      // this.myData.detectDictItems[index].attachmentIds.splice(findIndex,1)
      // this.$emit('deleteUploadFile',this.myData)
    },
  },
  computed: {
    
  },
  watch: {
    data:{
      handler(val){
        this.$emit('success',val)
      },
      immediate:true
    }
  }
}
</script>

<style lang="less" scoped>
@import url('../../assets/css/commonPage.less');
@deep: ~">>>";
@mainColor:#1990FF; // 步骤条主题颜色
div,span,p,ul{
  word-break: break-all;
  margin: 0;
  padding: 0;
}
.v-check-list{
  .title{
    color: #333333;
    font-size: 14px;
    margin-bottom: 10px;
  }
  ul{
    li{
      padding: 8px 12px;
      background: rgba(215, 220, 228, 0.2);
      color: #61677A;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 3px;
      margin-bottom: 8px;
      &:last-child{
        margin-bottom: 0;
      }
      .left-box{
        flex-shrink: 0;
        margin-right: 10px;
        flex: 1;
      }
      .right-box{
        max-width: 50%;
      }
    }
  }
}
/deep/ .pic_upload{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  span,img,div.img-div{
    width: 40px!important;
    height: 40px!important;
  }
  span.removeBox{
    height: 14px!important;
    width: 14px!important;
    margin: 0;
    line-height: 14px;
    /deep/ .van-icon{
      font-size: 10px;
    }
  }
  span{
    margin: 5px;
  }
  .f7-icons {
    font-size: 16px;
  }
  .demo-gauge{
    left: 50%!important;
    transform: translateX(-50%);
    margin-left: 0!important;
  }
  .gauge-svg, .gauge svg{
    width: 22px;
  }
}
.df-box{
  display: flex;
  .right-content-box{
    flex: 1;
    .title{
      font-weight: 400!important;
    }
  }
}
.index{
  flex-shrink: 0;
  width: 25px;
  height: 22px;
  background: rgba(51, 133, 255, 0.1);
  color: @mainColor;
  margin-right: 15px;
  text-align: center;
  line-height: 22px;
  font-size: 12px;
}
.qzjx-accordion{
  .title-box{
    display: flex;
    align-items: center;
    .title,.index{
      font-weight: 400;
    }
  }
  .v-check-list{
    padding: 0 15px 15px 55px;
  }
  /deep/.accordion-item-content::before{
    display: none;
  }
}
/deep/ .van-radio__label--disabled {
    color: #323233;
}
/deep/ .pic_upload span .offline_tag{
  font-size: 7px;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}
.noUpload{
    background: #f7f8fa;
    color: #b7c2d9;
    border: 1px solid #b7c2d9;
    border-radius: 6px;
    border-bottom-left-radius: 0;
    padding: 2px 5px;
    font-size: 12px;
    margin-left: 5px;
}
</style>